<template>
  <div id="routerview">
    <!-- 轮播图部分 -->
    <cube-slide
      id="cubeslide"
      ref="slide"
      :data="items"
      :interval="2000"
      :loop="true"
      style="width:100%;height:200px"
    >
      <cube-slide-item class="slide" v-for="(item, index) in items" :key="index">
        <a :href="item.url">
          <img :src="item.img" />
        </a>
      </cube-slide-item>
    </cube-slide>
    <!-- 九宫格部分 -->
    <ul class="mui-table-view mui-grid-view mui-grid-9">
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <router-link to="/home/newlist">
          <span class="mui-icon mui-icon-home"></span>
          <div class="mui-media-body">新闻资讯</div>
        </router-link>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <router-link to="/home/photos">
          <span class="mui-icon mui-icon-email">
            <!-- <span class="mui-badge">5</span> -->
          </span>
          <div class="mui-media-body">图片列表</div>
        </router-link>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <a href="#">
          <span class="mui-icon mui-icon-chatbubble"></span>
          <div class="mui-media-body">Chat</div>
        </a>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <a href="#">
          <span class="mui-icon mui-icon-location"></span>
          <div class="mui-media-body">location</div>
        </a>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <a href="#">
          <span class="mui-icon mui-icon-search"></span>
          <div class="mui-media-body">Search</div>
        </a>
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <a href="#">
          <span class="mui-icon mui-icon-phone"></span>
          <div class="mui-media-body">Phone</div>
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
// import one from "../../assets/img/one.jpeg";
// import two from "../../assets/img/two.jpeg";
// import three from "../../assets/img/three.jpg";
// import four from "../../assets/img/four.jpeg";

export default {
  data() {
    return {
      items: []
    };
  },
  created() {
    this.getlunbo();
  },
  methods: {
    getlunbo() {
      this.$axios({
        method: "get",
        url: "http://www.liulongbin.top:3005/api/getlunbo"
      }).then(response => {
          this.items = response.data.message;
      });
    }
  }
};
</script>

<style lang="less" scoped>
#routerview {
  overflow: hidden;
}
#cubeslide {
  overflow: hidden;
}
.slide {
  height: 200px;
  width: 100%;
  img {
    background-size: 100% 100%;
  }
}
</style>